<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <title>Swipe Gallery</title>
  <script src="lib/zepto.min.js" type="text/javascript"></script>
  <script src="../swipeslide.js" type="text/javascript"></script>
  <link rel="stylesheet" href="../swipeslide.css">
  <style type="text/css" media="screen">
  header,footer,article,section,figure,figcaption {display: block;}
  body,ul,li,figure {margin:0;padding:0;}
  li {list-style:none}
  body {
    font: 16px/24px Helvetica, Arial, sans-serif;
    -webkit-text-size-adjust:none;
    overflow-x:hidden;
  }

  header { padding: 20px 60px; color: #fff; background: #000;}

  
  #g1 {
    width: 100%;
    max-width: 1200px;
    background: #00FFCC;
    margin: 0 auto;
  }
  #g1 figure {
    position: relative;
  }
  #g1 figcaption {
    position: absolute;
    top: -100px; left: 0; right: 0;
    padding: 10px 60px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    -webkit-transition: top 0.5s;
  }
  #g1 figcaption.active {
    top: 0
  }
  #g1 .ui-swipeslide-bullets {
    width: 100%;
    display: -webkit-box;
    -webkit-box-orient:horizontal;
    margin: 0;
  }
  #g1 .ui-swipeslide-bullets li {
    display: block;
    -webkit-box-flex: 1;
    border-radius: 0;
    margin: 0;
    border: 0;
    background: #000;
    color: #fff;
    height: 20px;
    line-height: 20px;
    font-size: 10px;
    border-left: 1px solid #fff;
  }
  #g1 .ui-swipeslide-bullets li:first-child {
      border-left: 0;
  }
  #g1 .ui-swipeslide-bullets li.active {
    background: #fff;
    color: #111;
    font-weight: bold;
    text-indent: 0;
  }

  #g2 {
    width: 300px;
    height: 200px;
    background: #eee;
    margin: 50px auto;
  }
  #g2 .ui-swipeslide-slide,
  #g3 .ui-swipeslide-slide {
    height: 200px;
    width: 280px;
    font-size: 80px;
    color: #fff;
    display: -webkit-box;
    -webkit-box-align:center;
    -webkit-box-pack:center;
  }
  #g2 ul { float: right; width: 280px;}
  #g2 .ui-swipeslide-bullets { float: left; width: 20px; }
  #g2 .ui-swipeslide-bullets li {
    display: block;
  }
  
  #g3 {
    width:80%;
    height: 140px;
    margin: 50px auto;
  }
  #g3 .ui-swipeslide-slide {
    width: 100%; height: 100px; opacity: 0.2;
    -webkit-transition: opacity 0.5s;
  }
  #g3 .ui-swipeslide-slide.active {
    opacity: 1;
  }
  </style>
  <script type="text/javascript">
  $(document).ready(function() {
    $('#g1').swipeSlide({
      beforeChange: function(instance, oldIndex, newIndex){
        instance.visibleSlides().find('figcaption').removeClass('active')
      },
      afterChange: function(instance, newIndex){
        instance.visibleSlides().find('figcaption').addClass('active')
      }
    });
    $('#g2').swipeSlide({vertical: true});
    $('#g3').swipeSlide({
      threeD: true, 
      first: 3, 
      autoPlay: 2,
      beforeChange: function(instance, oldIndex, newIndex){
        instance.visibleSlides().removeClass('active')
      },
      afterChange: function(instance, newIndex){
        instance.visibleSlides().addClass('active')
      }
    });
  })  
  </script>
</head>
<body>
  <header>
    <h1>SwipeSlide</h1>
  </header>
  
  <section id="g1">
    <!--div class="legend">Swipe</div-->
    <div id="g1-content">
      <figure style="background: #fff;display: -webkit-box;  -webkit-box-pack: center; -webkit-box-align: center">
        <div style="background: #000; color: #fff; width: 100px; height: 100px; text-align: center; border-radius: 50px; line-height: 100px">&laquo; SWIPE &laquo;</div>
      </figure>
      <figure>
        <img src="media/amsterdam.jpg">
        <figcaption>Amsterdam Panorama</figcaption>
      </figure>
      <figure>
        <img src="media/saarschleife.jpg">
        <figcaption>Saarschleife Panorama</figcaption>
      </figure>
      <figure>
        <img src="media/river.jpg">
        <figcaption>Provence Panorama</figcaption>
      </figure>
      <figure>
        <img src="media/provence.jpg">
        <figcaption>Provence Panorama</figcaption>
      </figure>
      <figure style="background: #fff;display: -webkit-box;  -webkit-box-pack: center; -webkit-box-align: center">
        <p>
          <a class="first">First</a> | 
          <a class="prev">Prev</a> |
          <a class="next">Next</a> |
          <a class="last">Last</a>
        </p>
      </figure>
      <figure>
        <img src="media/pool.jpg">
        <figcaption>Provence Panorama</figcaption>
      </figure>
      <figure>
        <img src="media/santa-marta-pano-large.jpg" alt="Santa Marta Pano Large">
        <figcaption>Santa Marta Panorama</figcaption>
      </figure>
      <figure>
        <img src="media/barpark.jpg">
        <figcaption>Barpark Panorama</figcaption>
      </figure>
      <figure>
        <img src="media/gate.jpg">
        <figcaption>Amsterdam Panorama</figcaption>
      </figure>
      <figure style="background: #fff;display: -webkit-box;  -webkit-box-pack: center; -webkit-box-align: center">
        <div style="text-align: center">
          <p>Thank you.</p>
          <p><a href="http://www.onlinewahn.de/ende.htm" style="color: #000; font-size: 11px">Don't click here.</a></p>
        </div>
      </figure>
    </div>
  </section>


  
  <section id="g2">
    <ul>
      <li style="background: #f00;"><a class="next">Next</a></li>
      <li style="background: #f00;">1</li>
      <li style="background: #0f0;">2</li>
      <li style="background: #00f;"><a class="first">&uarr;</a></li>
    </ul>
  </section>
  
  <section id="g3">
    <ul>
      <li style="background: #f00;"><a class="prev">1</a></li>
      <li style="background: #090;">2</li>
      <li style="background: #0f0;">3</li>
      <li style="background: #0f9;">4</li>
      <li style="background: #0ff;">5</li>
      <li style="background: #09f;"><a class="next">6</a></li>
    </ul>
  </section>

</body>
</html>
